<template>
    <div class="header">
    <div class="left">
         <h1>叩丁狼后台管理系统</h1>
         <el-icon><Grid /></el-icon>
    </div>
    <el-dropdown>
    <span class="el-dropdown-link">
      admin
      <el-icon class="el-icon--right">
        <arrow-down />
      </el-icon>
    </span>
    <template #dropdown  @command = "">
      <el-dropdown-menu>
        <el-dropdown-item>首页</el-dropdown-item>
        <el-dropdown-item>退出</el-dropdown-item>
      
      </el-dropdown-menu>
    </template>
  </el-dropdown>
    </div>
</template>

<script setup lang="ts">
import { ArrowDown,Grid } from '@element-plus/icons-vue'

</script>

<style lang="less" scoped>
.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
.header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    .el-icon{
        color: #fff;
        font-size: 22px;
    }
    h1{
        font-size: 22px;
        margin: 0;
         margin-right: 20px;
    }
    .left{
        display: flex;
        align-items: center;
    }
    ::v-deep(.el-dropdown){
       display: flex;
       align-items: center;
       color: #fff;
        
    }
}

</style>